//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin navigation-bar-helpers() {
    /* ==========================================================================
       Navigation

    //== Regions
    //## Behavior in the different regions
    ========================================================================== */
    // When used in topbar
    .region-topbar {
        .mx-navbar {
            background-color: $navtopbar-bg;
            min-height: auto;
            ul.nav {
                > .mx-navbar-item {
                    margin-left: $spacing-small;
                }
                /* Navigation item */
                & > li.mx-navbar-item > a {
                    color: $navtopbar-color;
                    font-size: $navtopbar-font-size;
                    line-height: 1.2;
                    /* Dropdown arrow */
                    .caret {
                        border-top-color: $navtopbar-color;
                        border-bottom-color: $navtopbar-color;
                    }
                    &:hover,
                    &:focus,
                    &.active {
                        color: $navtopbar-color-hover;
                        background-color: $navtopbar-bg-hover;
                        .caret {
                            border-top-color: $navtopbar-color-active;
                            border-bottom-color: $navtopbar-color-active;
                        }
                    }
                    &.active {
                        color: $navtopbar-color-active;
                        background-color: $navtopbar-bg-active;
                    }

                    /* Dropdown */
                    .mx-navbar-submenu::before {
                        border-color: transparent transparent $navtopbar-border-color transparent;
                    }

                    // Image
                    .glyphicon,
                    .mx-icon-lined,
                    .mx-icon-filled {
                        font-size: $navtopbar-glyph-size;
                    }
                }

                /* When hovering or the dropdown is open */
                & > .mx-navbar-item > a:hover,
                & > .mx-navbar-item > a:focus,
                & > .mx-navbar-item.active a,
                & > .mx-navbar-item.open > a,
                & > .mx-navbar-item.open > a:hover,
                & > .mx-navbar-item.open > a:focus {
                    color: $navtopbar-color-hover;
                    background-color: $navtopbar-bg-hover;
                    .caret {
                        border-top-color: $navtopbar-color-hover;
                        border-bottom-color: $navtopbar-color-hover;
                    }
                }

                & > .mx-navbar-item.open .dropdown-menu {
                    border-radius: $border-radius-default;
                    background-color: $navtopbar-sub-bg;
                    padding: $spacing-small $spacing-small 0;
                    margin: 0;
                    border: 0;
                    box-shadow: 0px 2px 2px rgba(194, 196, 201, 0.30354);
                    & > li.mx-navbar-subitem a {
                        border-radius: $border-radius-default;
                        color: $navtopbar-color;
                        font-size: $navtopbar-sub-font-size;
                        line-height: 1.2;
                        margin: 0 0 $spacing-small;
                        padding: $spacing-small;
                        &:hover,
                        &:focus {
                            color: $navtopbar-color-hover;
                            background-color: $navtopbar-sub-bg-hover;
                        }
                    }
                }
                & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
                    color: $navtopbar-sub-color-active;
                    background-color: $navtopbar-sub-bg-active;
                    .caret {
                        border-top-color: $navtopbar-sub-color-active;
                        border-bottom-color: $navtopbar-sub-color-active;
                    }
                }
            }
            @media (max-width: $screen-md) {
                ul.nav > li.mx-navbar-item > a {
                }
                .mx-navbar-item.open .dropdown-menu {
                    background-color: $navtopbar-sub-bg;
                    & > li.mx-navbar-subitem > a {
                        color: $navtopbar-sub-color;
                        font-size: $navtopbar-sub-font-size;
                        &:hover,
                        &:focus {
                            color: $navtopbar-sub-color-hover;
                            background-color: $navtopbar-sub-bg-hover;
                        }
                        &.active {
                            color: $navtopbar-sub-color-active;
                            background-color: $navtopbar-sub-bg-active;
                        }
                    }
                }
            }
        }
    }

    // When used in sidebar
    .region-sidebar {
        .mx-navbar {
            background-color: $navsidebar-bg;
            ul.nav {
                /* Navigation item */
                & > li.mx-navbar-item > a {
                    color: $navsidebar-color;
                    font-size: $navsidebar-font-size;

                    /* Dropdown arrow */
                    .caret {
                        border-top-color: $navsidebar-color;
                        border-bottom-color: $navsidebar-color;
                    }
                    &:hover,
                    &:focus,
                    &.active {
                        color: $navsidebar-color-hover;
                        background-color: $navsidebar-bg-hover;
                        .caret {
                            border-top-color: $navsidebar-color-active;
                            border-bottom-color: $navsidebar-color-active;
                        }
                    }
                    &.active {
                        color: $navsidebar-color-active;
                        background-color: $navsidebar-bg-active;
                    }

                    /* Dropdown */
                    .mx-navbar-submenu::before {
                        border-color: transparent transparent $navsidebar-border-color transparent;
                    }

                    // Image
                    .glyphicon,
                    .mx-icon-lined,
                    .mx-icon-filled {
                        font-size: $navsidebar-glyph-size;
                    }
                }

                /* When hovering or the dropdown is open */
                & > .mx-navbar-item > a:hover,
                & > .mx-navbar-item > a:focus,
                & > .mx-navbar-item.active a,
                & > .mx-navbar-item.open > a,
                & > .mx-navbar-item.open > a:hover,
                & > .mx-navbar-item.open > a:focus {
                    color: $navsidebar-color-hover;
                    background-color: $navsidebar-bg-hover;
                    .caret {
                        border-top-color: $navsidebar-color-hover;
                        border-bottom-color: $navsidebar-color-hover;
                    }
                }
                & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
                    color: $navsidebar-sub-color-active;
                    background-color: $navsidebar-sub-bg-active;
                    .caret {
                        border-top-color: $navsidebar-sub-color-active;
                        border-bottom-color: $navsidebar-sub-color-active;
                    }
                }
            }
            @media (max-width: $screen-md) {
                ul.nav > li.mx-navbar-item > a {
                }
                .mx-navbar-item.open .dropdown-menu {
                    background-color: $navtopbar-sub-bg;
                    & > li.mx-navbar-subitem > a {
                        color: $navsidebar-sub-color;
                        font-size: $navsidebar-sub-font-size;
                        &:hover,
                        &:focus {
                            color: $navsidebar-sub-color-hover;
                            background-color: $navsidebar-sub-bg-hover;
                        }
                        &.active {
                            color: $navsidebar-sub-color-active;
                            background-color: $navsidebar-sub-bg-active;
                        }
                    }
                }
            }
        }
    }

    .hide-icons.mx-navbar {
        .glyphicon,
        .mx-icon-lined,
        .mx-icon-filled {
            display: none;
        }
    }
}
